<script setup lang="ts">

import {ApiLogin} from "~/api/auth";
import {useLocaleLocation} from "#i18n";
const {t}= useI18n()
const router = useRouter()
const locale_location = useLocaleLocation()
const access_token = useBackendAccessToken()

const LoginState = reactive({
  login:"",
  password:""
})

const LoginAction = (values: any)=>{
  ApiLogin(values).then((res)=>{
    const cookie = useCookie("backend_access_token")
    cookie.value = res.data.access_token
    access_token.value = res.data.access_token
    router.push(locale_location("/backend/dashboard"));
  }).catch(err=>{
    message.error(t(err))
  })

}
</script>

<template>
<div class="w-full h-full min-w-[100vw] min-h-[100vh] flex justify-center items-center bg-blue-950">
  <div class="xs:min-w-[100vw] md:min-w-[30vw] xl:min-w-[20vw] h-auto">
  <a-form layout="vertical" :model="LoginState" @finish="LoginAction">
    <a-form-item class="form_item" :label="$t('common.auth.login_field_name')" name="login" :rules="[{ required: true, message: 'Please input your username!' }]">
      <a-input v-model:value="LoginState.login"/>
    </a-form-item>
    <a-form-item class="form_item" :label="$t('common.auth.password_field_name')" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
      <a-input-password v-model:value="LoginState.password"/>
    </a-form-item>
    <a-button class="w-full" type="primary" html-type="submit">{{$t('common.auth.login_text')}}</a-button>
  </a-form>

  </div>
</div>
</template>

<style scoped>
:deep(.ant-form-item-label label){
  color: white;
}

</style>
